<template>
  <p>child</p>
  <p>{{ count }}</p>
  <button @click="$emit('setCount')">更新</button>
  <button @click="update">更新</button>
</template>

<script lang="ts" setup>
import { useAttrs } from "vue";
// 不需要引入，可以直接使用
// 声明接受props数据，模板页面可以直接使用
// const props = defineProps<{
//   count: number; // 必填的
//   age?: number; // 可选的
// }>();

// 不需要引入，可以直接使用 withDefaults
const props = withDefaults(
  defineProps<{
    count: number; // 必填的
    number?: number; // 可选的
  }>(),
  {
    number: 20, // 可选参数默认值
  }
);

console.log(props.count);

// 不需要引入，可以直接使用
// 声明接受自定义事件，模板页面可以直接使用
const emit = defineEmits(["setCount"]);

const update = () => {
  emit("setCount");
};

const attrs = useAttrs();
console.log(attrs);
</script>
